<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in banners" @click.stop.prevent="goDetail(item)">
        <img :src="item.picUrl" alt="">
      </div>
    </div>
    <div class="swiper-pagination swiper-pagination-white"></div>
  </div>
</template>

<script>
  import $ from 'jquery'
  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'
  export default {
    props: {

    },
    data () {
      return {
        mySwiper: '',
        banners: []
      }
    },
    mounted () {
      this.getData()
    },
    methods: {
      initSwiper () {
        this.$nextTick(() => {
          this.mySwiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            autoplay: 2000,
            autoplayDisableOnInteraction: false,
            loop: true
          })
        })
      },
      getData () {
        let vm = this
        $.ajax({
          method: 'GET',
          url: 'http://114.141.165.129/operation/config/niurenniugu/nrngBanner.json',
          dataType: 'JSONP',
          jsonpCallback: 'success',
          success: function (response) {
            vm.banners = response.kv
            vm.initSwiper()
          }
        })
      },
      goDetail (item) {
        window.location.href = item.linkUrl
      }
    }
  }
</script>

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .swiper-container {
    width: 100%;
    height: 115px;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 0 !important;
  }
</style>
